﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="../../../../css/weui/weui.min.css" rel="stylesheet" />
    <link href="../../../../css/weui/weui.example.css" rel="stylesheet" />
    <link href="/weixin/pano360/Templates/css/swiper-3.2.7.min.css" rel="stylesheet" />
    <script src="/weixin/pano360/Templates/js/jquery-2.0.2.min.js"></script>+
    <script src="/templatesstore/js/swipe_1.js" type="text/javascript"></script>

    <script type="text/javascript" src="/admin/js/layout.js"></script>
    <link href="/admin/skin/default/style.css" rel="stylesheet" type="text/css" />
   
    <script>
    var dragwidth = 0;
    $(document).ready(function () {
      
        showcontent(0);
        setcatelog();//设置目录下list

        //地图滑动
        var imgcd = $("#imgcd");
        imgcd.mousedown(function (e)//e鼠标事件
        {
            var maxwidth = imgcd.width() * -1 +( $(document.body).width());
            var offset = imgcd.offset();//DIV在页面的位置
            var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离
            imgcd.bind("mousemove", function (ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
            {
                var _x = ev.pageX - x;//获得X轴方向移动的值
                if (_x < 0 && _x > maxwidth) {
                    imgcd.css({ 'left': _x });
                }
            });
        });
        var form1 = $('#body');
        form1.mouseup(function () {
            imgcd.unbind("mousemove");
        })
        //地图滑动
        
        //幻灯片高度设置
        var nowheight = window.innerHeight*0.8 - 420;
        $("div .tablist" ).css('height',nowheight + 'px');
        //var count = document.getElementById("divhdp").getElementsByTagName("img").length;
        //for (i = 0; i < count; i++) {
        //    document.getElementById("divhdp").getElementsByTagName("img").item(i).style.cssText = " width:100%;height:" +nowheight  + "px";
        //}

        //备注设置高度
        var divcontentheight = $('#divcontent').height();
        var remarkheight = divcontentheight * 0.4 - 40;
        $('#remarkcontent').css('height',remarkheight + 'px')

    })

    function setposition(i,jdName,imgsrc) {
        $('#divzz').css('display','inline');
        var imgi = $('#img'+i);
        var offsetxpx = imgi.css('left');
        var sightwidth = window.innerWidth;
        var imgwidth = $('#imgcd').width();
        var offsetx = parseInt(offsetxpx.replace('px',''));
        var offsetleft = 0;
        if(offsetx>sightwidth/2 && offsetx < (imgwidth - sightwidth/2))
        {
            offsetleft = offsetx - sightwidth/2 ;
        }
        else if(offsetx >= (imgwidth - sightwidth/2))
        {
            offsetleft = imgwidth - sightwidth/2 ;
        }
        offsetleft = offsetleft * -1;
        var imgcd = $("#imgcd");
        imgcd.css({ 'left': offsetleft + 'px' });
        for(var j=0;j<3;j++)
        {
            imgi.fadeOut(200);
            imgi.fadeIn(200);
        }
        imgi.attr('src','/images/cl.gif');
        setTimeout(function(){ showzzc(i,jdName,imgsrc);}, 1200);
       
    }

    function showzzc(i,jdName,imgsrc)
    {
        var remark = $('#input'+i).val();
        $('#tdcontent').text(jdName);
        $('#imgcontent').attr('src',imgsrc);
        $('#remarkcontent').text(remark);
        $('#acontent').attr('href','/weixin/pano360/pano.aspx?id=' + i);
        $('#divcontent').fadeIn(500);
    }

    function closezzc()
    {
        $('#divzz').css('display','none');
        $('#divcontent').css('display','none');
    }

    function showcontent(i)
    {
        $('.tab-content').addClass('hidden');
        $('.tab-content:eq('+i+')').removeClass('hidden');
    }

    function setcatelog()
    {
        var valuefield = $('#valuefield');
        $('#valuefield a').each(function(){
            var catelog = $(this).attr('catelog');
            
            if($(this).text().length>10)
            {
               $(this).text($(this).text().substring(0,8) + '...') ;
            }
            var div = $('div.tab-content').filter('[catelog="'+catelog+'"]');
            $(this).appendTo(div);

        });
    }


    </script>
    <style>
        .menu {
            height: 8%;
            display: block;
            position: absolute;
            top: 85%;
            width: 100%;
            z-index: 100;
        }

        .btn {
            display: inline-block;
            height: 20px;
            line-height: 18px;
            text-align: center;
            font-size: 12px;
            color: #222;
            margin: 0 0 0 0;
            padding: 0 0 0 0;
            border: 1px solid #d1d1d1;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            -ms-border-radius: 6px;
            -o-border-radius: 6px;
            border-radius: 6px;
            background-color: #ee8822;
        }

        .hidden {
            display:none;
        }

        .tablist {
            overflow-y:auto;
        }

        .item
        { 
            float:left; 
            padding:15px 5px; 
            border-top:1px solid #e1e1e1; 
            border-right:1px solid #e1e1e1; 
            border-left:1px solid #e1e1e1; 
            height:15px; 
            line-height:16px; 
            font-size:14px; 
            color:#333; 
            text-align:center; 
            background:#eeb; 
            overflow:hidden;
            text-wrap:none;
            margin:0 0 0 0;
        }
    </style>
</head>

<body id="body">

    <div id="divzz" style="display:none;top:0%;left:0px;height:85%;width:100%;z-index:350;position:absolute"></div>
    <div id="divcontent" style="display:none;left:0px;border-top:solid 2px black;border-bottom:solid 2px black;height:70%;width:100%;background-color:white;z-index:400;position:absolute">
        <div style="text-align:right;height:19px;font-size:14px;font-family:SimHei;font:bolder">
            <table>
                <tr>
                    <td id="tdcontent" width="98%" align="left">标题</td>
                    <td align="right">
                        <img src="/images/close.jpg" style="cursor:pointer" onclick="closezzc()" />
                    </td>
                </tr>
            </table>
        </div>
        <img id="imgcontent" src="/images/cdmap.gif" style="display:inline;width:100%;height:60%;margin-bottom:0px;padding-bottom:0px">
        <!--<a id="acontent" class="btn" href="#" style="top:-10px;position:relative">查看360全景</a>-->
        <div id="remarkcontent" style="top:-12px;position:relative;font-family:SimHei;width:100%;overflow:auto">
            
        </div>
    </div>

    <div id="div" class="page" style="overflow:hidden">
        <div id="imgcd" style="width:1000px;height:400px;position:relative;z-index:50;background:url(/images/cdmap.gif) no-repeat" onclick="return false;" />

        <vt:function var="hdp" method="getPanos" type="$this" />
        <vt:foreach from="$hdp" item="p" index="i">
            <img src="/images/cl.gif" id="img{$p.id}" title="{$p.jdName}"
                 style="position:absolute;cursor:pointer;height:12px;width:12px;
                        top:{$p.top}px;left:{$p.left}px;z-index:100"
                 onclick="showzzc({$p.id},'{$p.jdName}','{$p.pic_yulan}');" />
        </vt:foreach>

    </div>

    <!--<div class="slide-bar" id="divhdp" style="height:200px">
           <div class="swiper-container">
               <div class="swiper-wrapper">
                   <vt:function var="hdp" method="getPanos" type="$this"  />
                   <vt:foreach from="$hdp" item="p" index="i">
                       <div class="swiper-slide">
                           <a>
                               <p>{$p.jdName}</p>
                               <img src="{$p.pic_yulan}" alt="" onclick="setposition({$p.id},'{$p.jdName}','{$p.pic_yulan}')" />
                               <input style="display:none" value="{$p.remark}" id="input{$p.id}" />
                           </a>
                       </div>
                   </vt:foreach>
                   <div class="swiper-pagination"></div>
               </div>
           </div>
       </div>
    <script src="/weixin/pano360/Templates/js/swiper-3.2.7.min.js"></script>
    <script type="text/javascript">
        var mySwiper = new Swiper('.swiper-container', {
            loop: true,
            // 分页器
            pagination: '.swiper-pagination'
        })
    </script>-->
    <div id="valuefield">
        <vt:function var="hdp" method="getPanos" type="$this" />
        <vt:foreach from="$hdp" item="p" index="i">
            <!--<img src="{$p.pic_yulan}" alt="" onclick="setposition({$p.id},'{$p.jdName}','{$p.pic_yulan}')" />-->
            <!--<input type="hidden"  value="{$p.remark}" id="input{$p.id}" src="{$p.pic_yulan}"  jdName="{$p.jdName}" catelog="{$p.catelog}"/>-->
            <a class="item" catelog="{$p.catelog}" onclick="setposition({$p.id},'{$p.jdName}','{$p.pic_yulan}')" >{$p.jdName}</a>
            <label ></label>
        </vt:foreach>
    </div>
    <div class="content-tab-wrap"  style="margin:0 0 0 0">
        <div class="content-tab" style="margin:0 0 0 0" >
            <div class="content-tab-ul-wrap" style="margin:0 0 0 0">
                <ul>
                    <li><a href="javascript:;" style="width:85%;margin:0px 18px 0px 0px;padding:0px 5px 0px 0px;background-color:#edb" onclick="tabs(this);">山庄八庙</a></li>
                    <li><a href="javascript:;" style="width:85%;margin:0px 18px 0px 0px;padding:0px 5px 0px 0px;background-color:#edb" onclick="tabs(this);">长城精粹</a></li>
                    <li><a href="javascript:;" style="width:85%;margin:0px 20px 0px 0px;padding:0px 5px 0px 0px;background-color:#edb" onclick="tabs(this);">坝上草原</a></li>
                    <li><a href="javascript:;" style="width:85%;margin:0px 18px 0px 0px;padding:0px 5px 0px 0px;background-color:#edb" onclick="tabs(this);">丹霞山水</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="tab-content tablist" catelog="山庄八庙" style="height:20px;padding:5px 0 0 0;"></div>
    <div class="tab-content tablist hidden"  catelog="长城精粹" style="padding:5px 0 0 0;"></div>
    <div class="tab-content tablist hidden" catelog="坝上草原" style="padding:5px 0 0 0;"></div>
    <div class="tab-content tablist hidden" catelog="丹霞山水" style="padding:5px 0 0 0;"></div>


        <div class="bd menu">
            <div class="weui_grids">
                <a href="/weixin/scenic/index.aspx?id=3" class="weui_grid js_grid" data-id="button">
                    <div class="weui_grid_icon">
                        <img src="/modules/cdrt/smart//images/icon_nav_button.png" alt="" />
                    </div>
                    <p class="weui_grid_label">
                        景区名录
                    </p>
                </a>
                <a href="/weixin/pano360/detail.aspx?wid={$wid}" class="weui_grid js_grid" data-id="cell">
                    <div class="weui_grid_icon">
                        <img src="/modules/cdrt/smart/images/icon_nav_cell.png" alt="" />
                    </div>
                    <p class="weui_grid_label">
                        3D景区
                    </p>
                </a>
                <a href="/weixin/pano360/scenic_around.aspx?wid={$wid}" class="weui_grid js_grid" data-id="toast">
                    <div class="weui_grid_icon">
                        <img src="/modules/cdrt/smart/images/icon_nav_toast.png" alt="" />
                    </div>
                    <p class="weui_grid_label">
                        景区周边
                    </p>
                </a>
            </div>
        </div>
</body>
</html>

